
<template>
  <div id="register">
    <div id='building'>
    <div class="login-box" >
      <div class="title"><h1><b>今日头条</b></h1></div>
       <div class="form">
      <el-form
        :model="RegisterUser"
        :rules="rules"
        status-icon
        ref="ruleForm"
        class="demo-ruleForm"
        style="width: 300px;"
      >
        <el-form-item prop="name">
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="请输入账号"
            v-model="RegisterUser.name"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请输入密码"
            v-model="RegisterUser.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmpassword">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请再次输入密码"
            v-model="RegisterUser.confirmpassword"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="medium"
            type="primary"
            @click="Register"
            style="width: 100%"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
        <div>
          已有账号？立即前往<router-link to="/" >[登录]</router-link>

        </div>
        <div class="under">
          <img class="under-img" src="../assets//imgs/under.jpg">
        </div>
  </div>
 </div>
 </div>
</template>
<script>
export default {
  name: "MyRegister",
  props: ["register"],
  data() {
    // 用户名的校验方法
    let validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      else if(value.length>11){ //与数据库对应
        return callback(new Error("用户名太长！请重试"));
      } 
      else {
        this.$refs.ruleForm.validateField("checkpassword");
        return callback();
      }
    };
    // 密码的校验方法
    let validatepassword = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      } 
       else if(value.length>20)
       { //与数据库对应
      return callback(new Error("密码太长！请重试"));
      } 
      else {
        this.$refs.ruleForm.validateField("checkpassword");
        return callback();
      }
    };
    let validateConfirmpassword = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入确认密码"));
      }
      if (this.RegisterUser.password != "" && value === this.RegisterUser.password) {
        this.$refs.ruleForm.validateField("checkpassword");
        return callback();
      } else {
        return callback(new Error("两次输入的密码不一致"));
      }
    };
    return {
      Registering: false, 
      RegisterUser: {
        name: "",
        password: "",
        confirmpassword: "",
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatepassword, trigger: "blur" }],
        confirmpassword: [{ validator: validateConfirmpassword, trigger: "blur" }],
      },
    };
  },
  watch: {
   
    register: function (val) {
      if (val) { // 监听父组件传过来的register变量，设置this.Registering的值
        this.Registering = val;
      }
    },
    Registering: function (val) {    // 监听this.Registering变量的值，更新父组件register变量的值
      if (!val) {
        this.$refs["ruleForm"].resetFields();
        this.$emit("fromChild", val);
      }
    },
  },
  methods: {
    Register() {
     
      this.$refs["ruleForm"].validate((valid) => {
     // 通过element自定义表单校验规则，校验用户输入的用户信息
        if (valid) {
          this.$axios
            .get(
              `/api/register?user_name=${this.RegisterUser.name}&user_password=${this.RegisterUser.password}&user_class=2`
            )
            .then((res) => {
              if (res.data.msg ==="操作成功") {
                this.Registering = false;
                alert("注册成功");
                alert("系统为你分配默认身份为:读者，若要更换身份可向管理员申请哦");
                this.$router.push({name:'MyLogin'})
              }  else {
                alert(res.data.msg);
              }
            })
            .catch((err) => {
              return Promise.reject(err);
            });
        } else {
          return false;
        }
      });
    },
  },
}
</script>
<style >
 #building{
  background:url("../assets/imgs/login.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
.login-box {
    width: 400px;
    height: 530px;
    background-color: #fff;
    border-radius: 3px;
    position: relative;
    left: 10%;
    top: 20%;
    opacity: 0.8;
    border-radius: 15px;

}
.form{
  width: 300px;
  
 padding:50px;
 padding-top: 0px;
 padding-bottom: 0px;
   
}
.title
{
  padding: 25px;
  padding-bottom: 15px;
}
.under{
  position: absolute;
  width:400px;
  height:100px;
  bottom: 0;
  
}
.under-img{
    width: 400px;
    height: auto;  
    max-width: 100%;  
    max-height: 100%;   
   border-bottom-left-radius:15px;
   border-bottom-right-radius:15px;
  
}
h1{
    font: 36px "微软雅黑"; /*设置字体和字体大小*/
	margin:20px auto; /*设置元素外边距*/
	font-weight: 300; /*设置字体粗细*/
	text-align: center; /*设置文字居中*/
	color: #1f78d8; /*设置文字颜色*/
  letter-spacing: 0.2em;/*设置文字间距*/ 
  -webkit-animation:bounce 2s infinite;/*设置动画*/
	}
@-webkit-keyframes bounce{/*创建动画*/
     0%,100%,20%,50%,80%{ -webkit-transform:translateY(0);}
     40%{-webkit-transform:translateY(-30px);}
     60%{-webkit-transform:translateY(-15px);}
	}
</style>
